<template>
    <div class="nianbiao">
      <el-dialog title="原始测量数据" :visible.sync="dialogRawDataVisible" :modal="false" width="50vw">
        <div class="demo-input-suffix">
          <el-input class="custom-input" placeholder="请输入年份/STD/RES/ARS/样本是" prefix-icon="el-icon-search"
            >
          </el-input>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button type="primary" icon="el-icon-download">下载</el-button>
          <el-button type="primary" icon="el-icon-printer">打印</el-button>
          <!-- 添加两个并列的虚线框 -->
          <div class="dashed-boxes">
            <div class="dashed-box">
              <span class="box-title">表格数据</span>
              <el-table :data="formData" :show-header="false" height="500px" border style="width: 100%"
                :default-sort="{ prop: 'year', order: 'descending' }">
                <el-table-column prop="year" label="年份" sortable width="180">
                </el-table-column>
                <el-table-column prop="std" label="STD" sortable width="180">
                </el-table-column>
                <el-table-column prop="res" label="RES" sortable>
                </el-table-column>
                <el-table-column prop="aes" label="AES" sortable>
                </el-table-column>
                <el-table-column prop="sampleSize" label="样本量" sortable>
                </el-table-column>
              </el-table>
            </div>
            <!-- <div class="dashed-box">
              <span class="box-title">统计数据</span>
              
            </div> -->
          </div>
        </div>
  
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialogRawDataVisible: true,
        formData: [{
          year: '2016-05-03',
          std: '1.276',
          res: '2.916',
          aes: '0.989',
          sampleSize: '1'
        }, {
          year: '2016-05-03',
          std: '4.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        }, {
          year: '2016-05-03',
          std: '8.276',
          res: '5.916',
          aes: '0.989',
          sampleSize: '1'
        }, {
          year: '2016-05-03',
          std: '3.276',
          res: '7.916',
          aes: '0.989',
          sampleSize: '1'
        }, {
          year: '2016-05-03',
          std: '5.276',
          res: '2.916',
          aes: '0.989',
          sampleSize: '1'
        }, {
          year: '2016-05-03',
          std: '2.276',
          res: '3.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
         {
          year: '2016-05-03',
          std: '0.276',
          res: '4.916',
          aes: '0.989',
          sampleSize: '1'
        },
      ]
      }
    },
    methods: {
      showRawData() {
        this.dialogRawDataVisible = true;
      },
    }
  }
  </script>
  
  <style scoped>
  /* .nianbiao{
    position:absolute;
    z-index: 1000;
  } */
  .text {
    font-size: 16px;
    display: flex;
    border: 1px solid #ddd;
    margin-top: 15px;
  }
  
  .text .left,
  .text .right {
    /* width: 50%; */
    padding: 10px;
  }
  
  .text .left .item {
    margin: 0;
  }
  
  /* .text .right img {
    width: 100%;
    height: auto;
  } */
  
  .card-footer button {
    font-size: 16px;
    /* 调整按钮文字大小 */
    margin: 0 10px;
  }
  
  .custom-input {
    width: 40%;
    /* 设置宽度为父容器的40% */
    margin-right: 10px;
    /* 添加右侧的间距 */
  }
  
  /* 虚线框容器样式，包含两个框并列 */
  .dashed-boxes {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  /* 每个虚线框样式 */
  .dashed-box {
    width: 100%;
    /* 每个框占宽度的48%，使它们并列 */
    border: 1px dashed #ccc;
    /* 设置虚线边框 */
    padding: 10px;
    position: relative;
  }
  
  /* 虚线框标题样式 */
  .box-title {
    position: absolute;
    top: -12px;
    left: 10px;
    background-color: white;
    padding: 0 5px;
    font-size: 14px;
    color: #333;
  }
  /deep/.el-dialog__header {
    height: 27px;
    background-color: rgb(7, 46, 82) !important;
  }
  
  /deep/.el-dialog__title {
    color: white !important;
    font-size: 24px;
  }
  
  /deep/.el-dialog__close {
    font-size: 24px !important;
    /* 增大关闭按钮字体大小 */
  }
  </style>